<template>
  <view>
    <view class="tabs">
      <view class="tab" v-for="(tab,index) in tabs" :key="index" :class="{active:index == type}"
            @click="handleTabClick(index)">
        {{ tab }}
      </view>
    </view>

    <view class="list">

      <view class="item" v-for="(item,i) in list" :key="i" @click="handleOrderInfoClick(item)">

        <view class="title">
          <view class="time">预约时间：{{ item.appointmentTime || '线下' }}</view>
          <image class="qrcode" src="/static/img/qt/order_qrcode.png" @click.stop="handleQRCodeClick(item)"
                 v-if="item.status == 1"></image>
        </view>

        <view class="info">
          <image class="cover" :src="item.comCover"></image>
          <view class="right">
            <view class="name text-cut2">{{ item.comName }}</view>
            <view class="address text-cut2">{{ item.address }}</view>
            <view class="stars">
              <text class="cuIcon-favorfill icon"></text>
              <text class="num">5.0</text>
            </view>
          </view>
        </view>

        <view class="desc">
          <view class="left">
            <view class="title">{{ item.goodsName }}</view>
            <!--<view class="tags">-->
            <!--  <view class="tag">热门</view>-->
            <!--  <view class="tag">有质感</view>-->
            <!--  <view class="tag">物美价廉</view>-->
            <!--  <view class="tag">服务好</view>-->
            <!--  <view class="tag">热门</view>-->
            <!--  <view class="tag">有质感</view>-->
            <!--  <view class="tag">物美价廉</view>-->
            <!--  <view class="tag">服务好</view>-->
            <!--</view>-->
          </view>
          <view class="right">
            <text>￥</text>
            <text class="num">{{ item.totalMoney }}</text>
          </view>
        </view>

        <view class="action">
          <view class="btn" v-if="item.status == 1" @click.stop="handleCancelClick(item,i)">取消预约</view>
          <!--<view class="btn" v-if="item.status == 3" @click.stop="handlePayClick(item)">支付</view>-->
          <view class="btn" v-if="item.status == 3">支付</view>
          <view class="btn" v-if="item.status == 4" @click.stop="handleCommentClick(item)">立即评价</view>
        </view>

      </view>

      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>

    </view>


    <my-dialog ref="dialog" show-cancel confirm-text="保存到本地" @confirm="handleSaveQrcode" :close-on-confirm="false"
               @show="qrShow = true" @close="qrShow = false">
      <view slot="content" class="dialog-content">
        <view class="dialog-tip">请出示该码核销</view>
        <canvas :style="{'width' : qrWidth + 'px' , 'height' : qrHeight + 'px'}" canvas-id="qrcode"
                class="show-qr-code" v-show="qrShow"></canvas>
      </view>
    </my-dialog>
    <my-dialog ref="cancel" show-cancel/>
    <my-dialog ref="pay" content="支付成功" icon="cuIcon-check"/>
  </view>
</template>

<script>
import MyDialog from "@/components/dialog";
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  name: "order-index",
  components: {MyDialog, ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      type: "0",
      tabs: ["全部", "我的预约", "进行中", "已完成"],
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      qrWidth: 0,
      qrHeight: 0,
      qrcode: null,

      qrShow: false,
    }
  },
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    handleTabClick(index) {
      this.type = index;
      this.refresh()
    },
    handleQRCodeClick(item) {
      let codeString = `{"orderId" : ${item.id}}`
      this.drawQrCode(codeString);
      this.$refs.dialog.show();
    },
    drawQrCode(text) {
      this.core.showLoading();
      let width = this.core.rpx2px(300)
      let height = this.core.rpx2px(300)

      //获取二维码数据
      this.qrWidth = width;
      this.qrHeight = height;
      this.$QRCode.make({
        canvasId: 'qrcode',
        text,
        size: Math.max(width, height),
        backgroundColor: '#ffffff',
        foregroundColor: "#000000",
        success: qr => {

          const ctx = uni.createCanvasContext("canvas", this);

          ctx.drawImage(qr, 0, 0, width, height);

          ctx.draw(false);
          uni.hideLoading();
        }
      });
    },
    handleSaveQrcode() {
      uni.canvasToTempFilePath({
        canvasId: "qrcode",
        success: (file) => {
          let qrcode = file.tempFilePath;

          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {
              uni.saveImageToPhotosAlbum({
                filePath: qrcode,
                success: () => {
                  this.$toast("保存成功")
                  this.$refs.dialog.close();
                },
              });
            },
            fail: () => this.$toast('授权失败')
          })
        },
      })
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getOrderList(this.type, ++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
    handlePayClick(item) {
      Api.onlinePay(item.id).then(data => {
        if (data === null) this.$refs.pay.show("已使用折扣支付成功");
        else {
          this.core.wxMpPay(data, () => {
            this.needRefreshOrderNum();
            this.$refs.pay.show("支付成功").then(() => this.refresh());
          })
        }
      })
    },
    handleOrderInfoClick(item) {
      uni.navigateTo({url: `/pages/index/my/technician/order/info/index?id=${item.id}`})
    },
    handleCommentClick(item) {
      uni.navigateTo({url: `/pages/index/my/order/comment/index?id=${item.id}`})
    },
    handleCancelClick(item, i) {
      this.$refs.cancel.show("你确定要取消预约吗？").then(_ => {
        Api.cancelOrder(item.id).then(res => {
          this.needRefreshOrderNum();
          this.$toast("取消成功");
          this.list.splice(i, 1);
        })
      })
    },
    needRefreshOrderNum() {
      uni.setStorageSync("needRefreshOrderNum", true)
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.type = options.type;
    this.refresh()
  },
  onPullDownRefresh() {
    this.refresh()
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.tabs {
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: r(0 40px);

  .tab {
    padding: r(30px);
    border-bottom: r(3px) solid transparent;

    &.active {
      color: #C38C3A;
      border-color: #C38C3A;
    }
  }
}

.list {
  padding-top: r(20px);

  .item {
    margin: r(30px 25px);
    border-radius: r(10px);
    background-color: white;
    padding: r(25px);

    & > .title {
      font-size: r(28px);
      color: #C38C3A;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .qrcode {
        height: r(56px);
        width: r(56px);
      }
    }

    .info {
      margin: r(15px 0 25px 0);
      display: flex;

      .cover {
        width: r(140px);
        height: r(140px);
        border-radius: r(10px);
        margin-right: r(20px);
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: r(30px);
          font-weight: 500;
          color: #333333;
        }

        .address {
          font-size: r(24px);
          color: #666666;
        }

        .stars {
          color: #FCCF0A;
          font-size: r(28px);
        }
      }
    }

    .desc {
      background: rgba(#F7F7F7, 0.71);
      border-radius: r(10px);
      display: flex;
      padding: r(30px);

      .left {
        flex: 1;

        .title {
          font-size: r(24px);
          color: #333333;
        }

        .tags {
          display: flex;
          font-size: r(22px);
          color: #909090;
          flex-wrap: wrap;

          .tag {
            margin-right: r(10px);
          }
        }
      }

      .right {
        display: flex;
        align-items: flex-end;
        font-size: r(24px);
        color: #E73832;

        .num {
          font-size: r(42px);
        }
      }
    }

    .action {
      display: flex;
      justify-content: flex-end;

      .btn {
        margin-top: r(24px);
        padding: r(7px 28px);
        background: #BF8F3A;
        border-radius: r(22px);
        font-size: r(20px);;
        color: #FFFFFF;

        & + .btn {
          margin-left: r(24px);
        }
      }
    }
  }

}

.dialog-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.dialog-tip {
  margin-bottom: r(27px);
  font-size: r(28px);
  color: #261900;
}

.show-qr-code {
  height: r(300px);
  width: r(300px);
}

.save-pic {
  background: #BF8F3A;
  border-radius: r(50px);
  font-size: r(28px);
  color: white;
  padding: r(12px 87px);
}
</style>